<!--
 * @Author: wangshuguang
 * @Date: 2022-02-22 14:13:47
 * @LastEditTime: 2022-09-20 11:58:56
 * @LastEditors: wangshuguang
 * @Description: 升级流量套餐
-->

<template>
	<div class="upgrade">
		<HeaderComp title="流量套餐" />
		<div class="title">商户套餐</div>
		<!-- 套餐列表 -->
    <template v-for="(pkg,idx) of pkgObj" >
      <div :key="'pkg_'+idx" v-if="pkg.list.length">
        <div class="dateTxt">{{ pkg.name }}</div>
        <meal-list :mealDataList='pkg.list' :active="nowMeal.id" @change="changeMeal"/>
      </div>
    </template>

		<!-- 按钮组 -->
		<div class="btnList">
			<van-button type="primary" class="submitBtn" @click="submit">提交</van-button>
		</div>
		 <van-loading size="24px" vertical v-show="pageLoading">加载中...</van-loading>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	import {
		getMercOpenPkg,
		calculateManyShop,
		upgradeFlowPkg
	} from "@/api/flow/index";
	import {
		mapGetters
	} from "vuex";
	import mealList from "./components/mealList.vue";
	export default {
  	components: { mealList },
		data() {
			return {
				nowMeal: {},
				calcMealData: {},
				mealLabelText: '',
				// 套餐类型 0：月套餐；1：年套餐；2：交互套餐；3：季套餐；4：半年套餐
				pkgObj:{
					'pkg_0': { list: [], name: '月套餐' },
					'pkg_3': { list: [], name: '季套餐' },
					'pkg_4': { list: [], name: '半年套餐' },
					'pkg_1': { list: [], name: '年套餐' },
					'pkg_2': { list: [], name: '交互次数套餐' },
				},
				pageLoading:false,
			}
		},
		mounted() {
			this.getBaseData()
		},
		computed: {
			...mapGetters(['flowQueryData'])
		},
		methods: {    
			changeMeal(item) {
				this.nowMeal = item
				this.calcBalance()
			},
			calcBalance() {
				const {
					merchantId
				} = this.flowQueryData
				const {
					pkgEndTime
				} = this.$route.query
				calculateManyShop({
					merchantId: merchantId,
					pkgFlowCost: this.nowMeal.price,
					addPercent: this.nowMeal.addRentRatio,
					restrictFlag: this.nowMeal.restrictFlag,
				}).then(res => {
					console.log('calculateManyShop', res)
					const data = res.data.data
					this.calcMealData = data
					if (data) {
						this.mealLabelText =
							`升级${this.nowMeal.tempName}，预计在下个月结日（${pkgEndTime}）扣除${data.comboTotalCost}流量余额，请确保届时流量余额充足`
					}
				})
			},
			getBaseData() {
				this.pageLoading = true
				const { deptId, merchantNo } = this.flowQueryData
				getMercOpenPkg({
					deptId,
					merchantNo
				}).then(res => {
					this.pageLoading = false
					console.log('获取套餐列表', res)
					// 三期弃用⬆⬆⬆
					let temporary = res.data.data;

					for (let i = 0; i < temporary.length; i++) {
						let obj = temporary[i]
						this.pkgObj['pkg_'+obj.type]['list'].push(obj)
					}
				})
			},
			showTip(num) {
				Dialog.alert({
					message: `多门店加租：每增加一家门店，流量套餐月租价格叠加${num}%`,
				})
			},
			submit() {
				if (!this.nowMeal.id) {
					Dialog.alert({
						title: '提示',
						message: '请选择套餐!',
					})
					return
				}
				const {
					merchantId,
					deptId
				} = this.flowQueryData
				const {
					orgId
				} = this.nowMeal
				console.log('提交数据', this.flowQueryData, this.nowMeal)
					Dialog.confirm({
						title: '提示',
						message: `购买${this.nowMeal.tempName},预计将扣除${this.nowMeal.price}流量余额,是否确定购买?`,
					})
					.then(() => {
						// if (rawMerchantPkgId == this.nowMeal.id) {
						// 	this.$toast('当前已经是此套餐！')
						// 	return
						// }
                     
						upgradeFlowPkg({
							changePkgFlow: this.nowMeal.monthFlow,
							merchantId,
							deptId,
							merchantPkgId: this.nowMeal.id,
							orgId,
							// rawMerchantPkgId: rawMerchantPkgId,
							merchantPkgName: this.nowMeal.tempName,
							merchantPkgPrice: this.nowMeal.price,
							merchantPkgType: this.nowMeal.type
						}).then(res => {
							 
							console.log('res', res)
							const {
								code,
								data,
								msg
							} = res.data
							if (code == 0) {
								Dialog.alert({
									title: '提示',
									message: res.data.data
								}).then(() => {
									// on close
									// this.$router.go(-1)
									this.$router.push('expireTimeInfo')
								});
							} else {

								if (msg == '您的流量余额不足，请先充值足额流量余额') {
									Dialog.confirm({
											title: '提示',
											message: msg,
											confirmButtonText: '去充值'
										})
										.then(() => {
											this.$router.push('recharge')
										})
										.catch(() => {
											// on cancel
										});
								} else {
									//this.$toast(msg)
									Dialog.alert({
											title: '提示',
											message: msg,

										})
										.then(() => {
											//this.$router.push('recharge')
										})
								}
							}
						})
					})
					.catch(() => {
						// on cancel
						
					});


			}
		}
	}
</script>

<style lang="less" scoped>
	.upgrade {
		padding: 30px 30px 100px;

		.title {
			color: #131313;
			font-size: 32px;
			font-weight: bold;
			padding-bottom: 30px;
		}

		.labelText {
			color: #131313;
			font-size: 26px;
			margin-bottom: 30px;
		}

		.labelText2 {
			color: #131313;
			opacity: 0.7;
			font-size: 26px;
		}

		.mealList {
			display: flex;
			margin-bottom: 26px;
			overflow: auto;

			.mealItem {
				min-width: 280px;
				background: #F8F8F8;
				border-radius: 15px;
				padding: 40px;
				flex-shrink: 0;
				margin-right: 26px;
				font-size: 24px;
				overflow: auto;
				position: relative;

				.mealItem-div_icon {
					position: relative;
					z-index: 100;
					display: inline-block;
					width: 30px;
					height: 30px;
					text-align: center;
					line-height: 30px;
					background: #FFB72F;
					border-radius: 50%;
					color: #fff;
					font-size: 14px;
				}

				.mealItem-div_title {
					font-size: 28px;
					font-weight: bold;
					margin-bottom: 30px;
				}

				.mealItem-div_arrow {
					position: absolute;
					bottom: 0;
					right: 0;
					display: none;
					width: 64px;
				}

				.mealItem-div_remark {
					white-space: nowrap;
				}

				&.mealActive {
					background: rgba(255, 183, 47, 0.12);

					.mealItem-div_title {
						color: #FFB72F;
					}

					.mealItem-div_arrow {
						display: inline-block;
					}
				}
			}
		}

		.btnList {
			// position: absolute;
			// bottom: 0;
			// left: 0;
			position: fixed;
			bottom: 0px;
			width: 100%;
			left: 0;

			.submitBtn {
				background: #FFB72F;
				border-color: #FFB72F;
				height: 98px;
				width: 100%;
				font-size: 32px;
				margin-top: 40px;
			}
		}

		.dateTxt {
			font-size: 32px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #131313;
			margin-bottom: 26px;
		}
	}
</style>
